<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bom</title>

    <style>

        .style{
            color: coral;
            font-size: 10px;
        }
        .newstyle{
            background-color: #ccc;
        }

font{
    background: #000;
}
    </style>
</head>
<body>

    <button onclick="gethello()">改灰</button>

    <dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
        <dt>摩卡</dt>
        <dd>热摩卡咖啡</dd>
        <dt>酸奶</dt>
        <dd>北京老酸奶</dd>
        <dt>果汁</dt>
        <dd>鲜榨苹果汁</dd>
    </dl>

    <div id="drink-menu">1</div>
    

    <script>

        let bu = document.querySelector('button');

       let elem =  document.getElementsByTagName('dl')[0];

       /* 
    {
    innterText:"mkakjshd",
    children:[dt,dd,dt,dd]  
    
    }
       
       
       */

       /* 获取的是一个列表 */
       let mk = document.getElementsByTagName('dt')[0]

       /* 只获取其中一个 */
       let dl = document.getElementById('drink-menu')

       /* 通用的获取方式 */

       /* 获取的一个,如果有多个,只拿第一个 */
       let div1 =  document.querySelector("div#drink-menu")

       div1.innerHTML = '<h1>hhhh</h1>' //修改文本值

       
       div1.style.color = "red";

       //style并不是一个str,而是一个样式的列表

    //    div1.style="color: aqua; font-size:10px; "  //修改样式值

       div1.className = "style"

       div1.className += ' newstyle'//追加一个新样式,通过classname改变

       
       console.log();
      

       /* 直接替换原来的值 */
    //    div1.style =" background: green; " 

       console.log(div1.style);


       console.log(div1);

        /* 获取全部,返回一个列表 */

        /* 
        css选择器

        id #id
        class  .class
        tag  tag
        交集  namename
        并集 name,name
        后代 name name
        子代 name > name
        
        */
        document.querySelectorAll('dd')

       console.log(dl);

       

       console.log(mk.innerText);
       
       console.log(elem.children[0]);

       console.log(elem);

      console.log(elem.tagName); 

       console.log(typeof elem);

        console.log( window.innerWidth);
        console.log( window.outerWidth);
        

        console.log(document.title);

        function gethello(){

            // if( div1.classList.contains('newstyle')){

            //     div1.classList.remove('newstyle')
            // }else{
            //     div1.classList.add('newstyle')
            // }
            /* 
            add 没有就追加
            remove 有就删除
            replice 替换
            toggle 开关灯效果(无则加勉,有则改之)

            */
           

            div1.classList.toggle('newstyle')

            if(bu.innerText=="改灰"){
                bu.innerText = "改回"
            }else{
                bu.innerText = "改灰"
            }
        
           
        
        
        }
       
    </script>
</body>
</html>